<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    .g-app {
      margin: 0 auto;
      height: 100%;
      width: 100%;
      max-width: 800px;
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto;
    }
    .list-item {
      height: 300px;
      width: 100%;
      background-color: #f0f0f0;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #333;
    }
    .loading {
      text-align: center;
      padding: 20px;
      font-size: 18px;
      color: #666;
    }
  </style>
  <body>
    <div class="g-app">
      <h2>
        方案 2（使用 Intersection Observer API
        ）：适用于现代浏览器，性能优化，代码更简洁，但兼容性有限。
      </h2>
      <p>
        Intersection Observer API 是一个现代的浏览器
        API，用于检测元素是否进入视口。这种方法可以用来检测滚动条是否触底。
      </p>
      <ul id="list">
        <li class="list-item">我是列表内容 1</li>
        <li class="list-item">我是列表内容 2</li>
        <li class="list-item">我是列表内容 3</li>
        <li class="list-item">我是列表内容 4</li>
        <li class="list-item">我是列表内容 5</li>
        <li class="list-item">我是列表内容 6</li>
        <li class="list-item">我是列表内容 7</li>
        <li class="list-item">我是列表内容 8</li>
        <li class="list-item">我是列表内容 9</li>
        <li class="list-item">我是列表内容 10</li>
      </ul>
      <div id="loading" class="loading">加载中...</div>
    </div>
    <script>
      const loading = document.getElementById("loading");
      const list = document.getElementById("list");

      // 创建 IntersectionObserver 实例
      const observer = new IntersectionObserver(
        (entries) => {
          for (const entry of entries) {
            // 交叉
            if (entry.isIntersecting) {
              setTimeout(() => {
                let currentLength = list.children.length; // 获取当前列表长度
                for (let i = 1; i <= 10; i++) {
                  const newItem = document.createElement("li");
                  newItem.className = "list-item";
                  newItem.textContent = `我是列表内容 ${currentLength + i}`;
                  list.appendChild(newItem);
                }
              }, 1000);
            }
          }
        },
        {
          root: null, // 使用视口作为根容器
          rootMargin: "0px",
          threshold: 0.1, // 当 10% 的 loading 元素进入视口时触发
        }
      );

      // 开始观察 loading 元素
      observer.observe(loading);
    </script>
  </body>
</html>
